<script setup>
import { onMounted, onUnmounted } from "vue";
import router from "@/router/index";
import { _$, $ } from "./detail";

onMounted(() => {
  _$.requestParam.id = router.currentRoute.value.query.id;
  $.loadDetail();
});

onUnmounted(() => {
  $.clean();
});
</script>

<template>
  <el-space direction="vertical" fill wrap class="w-fill" :size="20">
    <el-page-header @back="router.back()">
      <template #content>
        <span class="text-large font-600 mr-3"> 食谱信息详情 </span>
      </template>
    </el-page-header>
    <el-card class="w-fill" style="height: 100%" shadow="never">
      <div style="display: flex">
        <div class="detail">
          <img
            class="detail-img"
            src="https://cp1.douguo.com/upload/caiku/e/a/a/690x390_ea7841a98f45d946e53fb3d392ff14ca.jpeg"
          />
          <div class="bottom">
            <p>{{ _$.responseParam.name }}</p>
            <el-button
              v-if="!_$.responseParam.isCollect"
              type="warning"
              size="small"
              @click="$.onCollection(_$.responseParam.id, _$.responseParam)"
              >收藏</el-button
            >
            <el-button
              v-else
              type="warning"
              size="small"
              @click="$.onCancelCollection(_$.responseParam.id, _$.responseParam)"
              >取消收藏</el-button
            >
          </div>
          <div>
            <p style="margin: 10px 0">饮食建议：</p>
            <el-tag
              type="success"
              v-if="
                _$.responseParam.recipeCureDiseaseList &&
                _$.responseParam.recipeCureDiseaseList.length > 0
              "
              v-for="item in _$.responseParam.recipeCureDiseaseList"
            >
              {{ item.name }}
            </el-tag>
            <el-tag type="warning" v-else> 暂无 </el-tag>
          </div>
          <div>
            <p
              style="margin: 10px 0"
              v-if="
                _$.responseParam.recipeAllergyList &&
                _$.responseParam.recipeAllergyList.length > 0
              "
            >
              请对
              <el-tag
                type="error"
                v-for="item in _$.responseParam.recipeCureAllergyList"
              >
                {{ item.name }}
              </el-tag>
              过敏的人慎用：
            </p>
          </div>
          <div>
            <p style="margin: 10px 0">食物会导致的疾病：</p>
            <el-tag
              type="success"
              v-if="
                _$.responseParam.recipeDiseaseList &&
                _$.responseParam.recipeDiseaseList.length > 0
              "
              v-for="item in _$.responseParam.recipeDiseaseList"
            >
              {{ item.name }}
            </el-tag>
            <el-tag type="warning" v-else> 暂无 </el-tag>
          </div>
        </div>
        <div>
          <h3 style="margin-bottom: 20px">
            经典{{ _$.responseParam.name }}用料
          </h3>
          <div class="method">
            <div v-for="item in _$.separatedIngredients" class="child">
              <span class="name">{{ item.key }}</span>
              <span>{{ item.value }}<span v-if="item.value">g</span></span>
            </div>
          </div>
          <h3 style="margin: 20px 0">经典{{ _$.responseParam.name }}做法</h3>
          <el-timeline style="max-width: 600px; margin-left: -40px">
            <el-timeline-item
              v-for="(activity, index) in _$.separatedSteps"
              :key="index"
              :timestamp="activity.value"
            >
              {{ activity.key }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-card>
  </el-space>
</template>
<script></script>
<style scoped>
:v-deep(.disabled .el-upload--picture-card) {
  display: none !important;
}
.detail {
  margin: 10px 80px;
  > .detail-img {
    width: 400px;
    height: 260px;
    border-radius: 10px;
  }
  > p {
    font-size: 16px;
    font-weight: bold;
  }
  .bottom {
    width: 400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  > h3 {
    margin: 20px 0;
  }
}
.method {
  width: 600px;
  background-color: #ecfcf9;
  display: flex;
  flex-wrap: wrap;
  > .child {
    width: 50%;
    padding: 20px;
    border-right: solid 0.5px #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .name {
      color: #49ac9b;
    }
  }
}
</style>
